<template>
    <div class="box">
        <div class="box-header">
            <img v-show="activeTab == 'one'" src="@/assets/large-screen/title/on-one.png" />
            <img v-show="activeTab == 'two'" src="@/assets/large-screen/title/on-two.png" />
            <span :class="['box-header-title1', activeTab == 'one' ? 'on' : '']"
                @click="onTab('one')">人员来源地和目的地数据</span>
            <span :class="['box-header-title2', activeTab == 'two' ? 'on' : '']"
                @click="onTab('two')">物品来源地和目的地数据</span>
        </div>
        <div class="box-content">
            <div v-if="activeTab == 'one'" class="box-content-person">
                <!-- 一线进境来源地 -->
                <ToFromPieChart title="一线进境 来源地" :data="chartData"></ToFromPieChart>
                <!-- 二线出岛目的地 -->
                <ToFromPieChart title="二线出岛 目的地" :data="chartData"></ToFromPieChart>
            </div>
            <div v-if="activeTab == 'two'" class="box-content-goods">
                <!-- 一线进境邮递物品来源地 -->
                <ToFromPieChart title="一线进境 邮递物品 来源地" :data="chartData"></ToFromPieChart>
                <!-- 一线进境快件来源地 -->
                <ToFromPieChart title="一线进境 快件来源地" :data="chartData"></ToFromPieChart>
                 <!-- 一线进境跨境电商商品来源地 -->
                 <ToFromPieChart title="一线进境 跨境电商 商品来源地" :data="chartData"></ToFromPieChart>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ToFromPieChart from './ToFromPieChart.vue'
const activeTab = ref('one')

const chartData = [
  { name: '俄罗斯', value: 47 },
  { name: '马来西亚', value: 25 },
  { name: '新加坡', value: 18 },
  { name: '韩国', value: 10 }
]

function onTab(tab: string) {
    activeTab.value = tab
}
</script>


<style lang="less" scoped>
.box-content-person,.box-content-goods{
    display: flex;
}
</style>